<%--
  Created by IntelliJ IDEA.
  User: asus
  Date: 2020/5/14
  Time: 16:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="true"%>
<html>
<head>
    <title>供应商管理</title>
    <%@include file="/comm/head.jsp"%>
</head>
<body>
<div id="root">
    <Collapse value="search">
        <Panel name="search">
            条件查询
            <p slot="content">
                <i-form inline :label-width="90">
                   <%-- <form-item label="供应商编码:">
                        <i-input type="text" v-model="ProviderVo.proCode"/>
                    </form-item>--%>
                    <form-item label="名称:">
                        <i-input type="text" v-model="ProviderVo.proName"/>
                    </form-item>
                    <form-item label="联系人:">
                        <i-input type="text" v-model="ProviderVo.proContact"/>
                    </form-item>
                    <form-item label="电话:">
                        <i-input type="text" v-model="ProviderVo.proPhone"/>
                    </form-item>
                       <form-item label="地址:">
                           <i-input type="text" v-model="ProviderVo.proAddress"/>
                       </form-item>
                    <i-button type="primary" style="margin-left:20px" @click="pageNo=1;search();">搜索</i-button>

                </i-form>

            </p>
        </Panel>
    </Collapse>
    <card>
        <i-button type="success" @click="toAdd">添加供应商</i-button>
       <%-- <shiro:hasPermission name="provider:batchdel">--%>
            <i-button type="error" @click="batchDel">批量删除</i-button>
<%--        </shiro:hasPermission>--%>
    </card>
    <i-table :columns="columns" :data="pageResult.rows" @on-selection-change="tableSelection=arguments[0]" border stripe :height="400">

        <template slot-scope="{row,index}"  slot="action">
            <i-button type="warning" @click="toUpdate(row)" size="small">修 改</i-button>
        <%--    <i-button type="error" @click="del(row,index)" size="small">删 除</i-button><!--row代表此行数据-->--%>
        </template>
    </i-table>
    <modal v-model="addFlag" title="添加供应商" @on-ok="add">
        <i-form :label-width="80" style="padding: 30px" >
          <%--  <form-item label="供应商编码">
                <i-input v-model="provider.proCode" size="large"/>
            </form-item>--%>
            <form-item label="名称">
                <i-input v-model="provider.proName" size="large"/>
            </form-item>
           <%-- <form-item label="供应商详细描述">
                <i-input v-model="provider.proDesc" size="large"/>
            </form-item>--%>
            <form-item label="联系人">
                <i-input v-model="provider.proContact" size="large"/>
            </form-item>
            <form-item label="电话">
                <i-input v-model="provider.proPhone" size="large"/>
            </form-item>
            <form-item label="地址">
                <i-input v-model="provider.proAddress" size="large"/>
            </form-item>
            <form-item label="传真">
                <i-input v-model="provider.proFax" size="large"/>
            </form-item>
        </i-form>
    </modal>
    <modal v-model="shanFlag" title="删除原因" @on-ok="shanYuan">
        <i-form :label-width="80" style="padding: 30px" >
            <%--  <form-item label="供应商编码">
                  <i-input v-model="provider.proCode" size="large"/>
              </form-item>--%>
            <form-item label="删除原因">
                <i-input v-model="provider.yuanYin" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请填写删除原因"></i-input>
            </form-item>
            <%-- <form-item label="供应商详细描述">
                 <i-input v-model="provider.proDesc" size="large"/>
             </form-item>--%>

        </i-form>
    </modal>
    <modal v-model="updateFlag" title="修改供应商" @on-ok="update">
        <i-form :label-width="80" style="padding: 30px" >
            <%--<form-item label="供应商编码">
                <i-input v-model="provider.proCode" size="large"/>
            </form-item>--%>
            <form-item label="名称">
                <i-input v-model="provider.proName" size="large"/>
            </form-item>
            <%--<form-item label="供应商详细描述">
                <i-input v-model="provider.proDesc" size="large"/>
            </form-item>--%>
            <form-item label="联系人">
                <i-input v-model="provider.proContact" size="large"/>
            </form-item>
            <form-item label="电话">
                <i-input v-model="provider.proPhone" size="large"/>
            </form-item>
            <form-item label="地址">
                <i-input v-model="provider.proAddress" size="large"/>
            </form-item>
            <form-item label="传真">
                <i-input v-model="provider.proFax" size="large"/>
            </form-item>
            <%--<form-item label="更新时间">
                <date-picker type="datetime" format="yyyy-MM-dd HH:mm" v-model="provider.modifyDate" size="large"/>
            </form-item>--%>

        </i-form>
    </modal>
    <Page :total="pageResult.total"
          :page-size="pageSize"<%--每页条数--%>
    <%--:current.sync="pageNo"    =pageNo=arguments[0];searchUserList();当前页码，支持.sync修饰符,同步
    @on-change="searchUserList"返回改变后的页码,这两行代码相当于下面一行代码--%>
          @on-change="pageNo=arguments[0];search();"
    <%-- @on-change="searchUserList"--%>
          show-sizer<%--是否显示分页，用来改变page-size--%>
          :page-size-opts="[5,10,15]"<%--每页条数切换的配置--%>
    <%-- @on-page-size-change="changPageSize"--%>
          @on-page-size-change="pageSize=arguments[0];search();"<%--切换每页数时的回调，返回切换后的每页条数--%>
    />
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            columns:[
                {type:"selection",width:60,align:"center"},//自动开启多选功能
                {
                    title:"编号",key:"id",width: 130
                },
                {
                    title:"名称",key:"proName",width: 270
                },
               /* {
                    title:"供应商详细描述",key:"proDesc",width: 300
                },*/
                {
                    title:"联系人",key:"proContact",width: 130
                },
                {
                    title:"电话",key:"proPhone",width: 200
                },
                {
                    title:"地址",key:"proAddress",width: 350
                },
                {
                    title:"传真",key:"proFax",width: 200
                },
                /*{
                    title:"创建时间",key:"creationDate",width: 100
                },*/
                {
                    title:"操作",slot:"action" ,width:200
                }],
            pageResult:{
                rows:[],
                total:50
            },
            pageNo:1,
            pageSize:10,
            ProviderVo:{},
            provider:{},
            addFlag:false,
            updateFlag:false,
            shanFlag:false,
            tableSelection:[]//表格的selection表格选中的行

        },
        methods:{
            search(){
                axios.get(`${ctx}/sys/provider/list/${this.pageNo}/${this.pageSize}`,{params:this.ProviderVo})
                    .then(({data})=>{
                        // console.log(data.result);
                        this.pageResult=data.result;
                    });
            },
            batchDel(){
                // console.log("sdfs")
                let arr=this.tableSelection;

                if(arr.length==0) {
                    iview.Modal.error({
                        title:"信息提示",
                        content:"请选择至少选择一项待删除!"
                    });
                    return;
                }
                let _this=this;
                let flag= iview.Modal.confirm({

                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
_this.shanFlag=true;

                    /*    var ids= arr.map(provider=>{
                            return provider.id
                        }).join(",");
                        console.log(ids)*/

                   /*     axios.get(`${ctx}/sys/provider/batchDel?ids=`+ids)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.search();
                                // console.log(arr.length)

                            })*/

                    }

                });



            },
            shanYuan(){
                let arr=this.tableSelection;
                var ids= arr.map(provider=>{
                    return provider.id
                }).join(",");
                axios.post(`${ctx}/sys/provider/addYuan`,this.provider)
                    .then(({data})=>{
                        this.shanFlag=false;//关闭模态框
                        // iview.Message.success({content:data.msg});
                        // this.search();

                    });
                console.log(this.provider.yuanYin)
                axios.get(`${ctx}/sys/provider/batchDel?ids=`+ids,{params:this.provider})
                    .then(({data})=>{
                        iview.Message.success({content:data.msg});
                        this.search();
                        this.provider.yuanYin="";
                        // console.log(arr.length)

                    });
                console.log(ids)
                console.log(this.provider)
            },
            toAdd(){
                this.provider = {};
                this.addFlag=true;

            },
            add(){
                axios.post(`${ctx}/sys/provider/add`,this.provider)
                    .then(({data})=>{
                        this.addFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();

                    });
            },
            del(row,index){
                let _this=this;
                let flag= iview.Modal.confirm({
                    title:"您确实要删除么？",
                    content:"该操作不可逆，请谨慎操作。",
                    onOk(){
                        axios.get(`${ctx}/sys/provider/del?id=${row.id}`)
                            .then(({data})=>{
                                iview.Message.success({content:data.msg});
                                _this.search();
                            });
                    }
                });
            },
            toUpdate(row){
                Object.assign(this.provider,row);
                this.updateFlag=true;
            },
            update(){
                let params=Qs.stringify(this.provider,{serializeDate:(date)=> {
                        return  moment(date).format("YYYY-MM-DD HH:mm");
                    }});
                axios.post(`${ctx}/sys/provider/update`,Qs.parse(params))
                    .then(({data})=>{
                        this.updateFlag=false;//关闭模态框
                        iview.Message.success({content:data.msg});
                        this.search();
                    });

            },

        },
        mounted(){
            this.search();
        },

    });
</script>
</body>
</html>
